<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="menuList.rows"
              @selection-change="selectedChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="90">
      </el-table-column>
      <el-table-column prop="name" label="菜单名" width="240">
      </el-table-column>
      <el-table-column prop="url" label="url" width="300">
      </el-table-column>
      <el-table-column prop="icon" label="icon" width="300">
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.selected.length===0">批量删除</el-button>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="menuList.total"
          style="float:right;">
      </el-pagination>
    </el-col>

    <el-dialog title="新增/保存"
               :visible.sync="formVisible"
               :close-on-click-modal="false">
      <el-form :model="menuForm" label-width="80px" :rules="formRules" ref="editForm">
        <el-form-item label="菜单名" prop="name">
          <el-input v-model="menuForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input v-model="menuForm.url" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <icon-selector v-model="menuForm.icon"></icon-selector>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parent">
          <el-cascader v-model="menuForm.parent"
                       :options="parentMenu"
                       :props="{
							            checkStrictly: true,
							            label:'name',
							            value:'id'
							         }"
                       clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import IconSelector from "../../components/IconSelector";
export default {
  components:{IconSelector},
  mounted() {
    this.getMenu()
  },
  data(){
    return{
      parentMenu:[],
      formVisible: false,
      formRules:{
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
        ],
        sn: [
          {required: true, message: '请输入唯一标识', trigger: 'blur'}
        ]
      },
      query:{
        keyword:"",
        currentPage:1,
        pageSize:10
      },
      selected:[],
      menuList:{
        rows:[],
        total:0
      },
      menuForm:{
        id:null,
        name:"",
        url:"",
        parent:{
          id:null,
          name:""
        }
      }
    }
  },
  methods: {
    saveSubmit(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          console.log(this.menuForm)
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.$http.put("/menu",this.menuForm)
                .then(result => {
                  result = result.data
                  if (result.success){
                    this.$message({ message: "保存成功!", type: 'success' });
                    this.query.currentPage = 1
                    this.getMenu()
                    this.formVisible = false
                  } else {
                    this.$message({ message: result.message, type: 'error' });
                  }
                })
                .catch(() => {
                  this.$message({ message: "网络异常，请稍后再试", type: 'error' });
                })
          })
          .catch(() => {
            this.$message({ message: "已取消保存", type: 'error' });
          })
        }
      })
    },
    handleCurrentChange(val){
      this.query.currentPage = val
      this.getMenu()
    },
    handleSizeChange(val){
      this.query.pageSize = val
      this.query.currentPage = 1
      this.getMenu()
    },
    search(){
      this.query.currentPage=1
      this.getMenu()
    },
    handleAdd(){
      this.menuForm = {
        id:null,
        name:"",
        url:"",
        parent:{
          id:null,
          name:""
        }
      }
      this.getParent()
      this.formVisible = true
    },
    selectedChange: function (selected) {
      this.selected = selected;
    },
    handleEdit(index,row){
      this.getParent()
      this.menuForm = row
      this.formVisible = true
    },
    handleDel(index,row){
      this.$confirm('确认删除吗？', '提示', {type: 'warning'})
          .then(() => {
            let id = row.id
            this.$http.delete("/menu/" + id)
                .then(result =>{
                  result = result.data
                  if (result.success){
                    this.$message({ message: "删除成功!", type: 'success' });
                    this.query.currentPage = 1
                    this.getMenu()
                  } else {
                    this.$message({ message: result.message, type: 'error' });
                  }
                })
                .catch(result => {
                  this.$message({message: '删除失败!', type: 'error'});
                })
          }).catch(() => {
        this.$message({message: '已取消删除!', type: 'info'});
      });
    },
    getMenu(){
      this.$http.post("/menu",this.query)
          .then(result =>{
            result = result.data
            if (result.success){
              this.menuList = result.data
            } else{
              this.$message({
                message: result.data.message,
                type: 'error'
              });
            }

          })
          .catch(() =>{
            this.$message({
              message: '网络异常',
              type: 'error'
            });
          })
    },
    getParent(){
      this.$http.post("/menu/tree")
          .then(result => {
            result = result.data
            if (result.success) {
              this.parentMenu = result.data
            } else {
              this.$message({
                message: result.data.message,
                type: 'error'
              });
            }
          })
          .catch(() => {
            this.$message({
              message: '网络异常',
              type: 'error'
            });
          });
    },
    batchRemove(){
      if (this.selected.length < 1){
        this.$message({
          message: '请选择后再删除',
          type: 'error'
        });
        return
      }
      this.$http.patch("/menu", this.selected)
          .then(result => {
            result = result.data
            if (result.success) {
              this.$message({message: "删除成功!", type: 'success'});
              this.query.currentPage = 1
              this.getMenu()
            } else {
              this.$message({message: result.message, type: 'error'});
            }
          })
          .catch(() => {
            this.$message({message: '删除失败!', type: 'error'});
          });
    }
  }
}
</script>

<style scoped>

</style>